<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<script src="../../libs//layui/layui-2.4.5/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin: 10px;">

	<div id="xx">

	</div>
	<table id="demo2"></table>

	<script>

		// var a,b=0,c=2,d=9;
		// var f1 = {a,b:1};
		// var f2 = {b:2,c}
		// var r = Object.assign(f1,f2,{d});
		// console.log(f1);
		// console.log(f2);
		// console.log(r);


		layui.use('table', function () {
			var table = layui.table;
			var $ = layui.jquery;

			$.get('../assets/table/data3.json', function (res1) {


				for (var i = 0; i < 5; i++) {
					var tableId = "table" + i;
					$('#xx').append("<table id='" + tableId + "'></table>");
					// console.log(res);
					//合并单元格
					table.render({
						elem: '#'+tableId
						, url: '../assets/table/data4.json' //数据接口
						// , data: res
						, cols: [
							[ //标题栏
								{ field: 'id', title: 'ID', width: 50, rowspan: 2, align: "center", hide: true }
								, { field: 'unit', title: '主管单位', width: 100, rowspan: 2, align: "center" } //rowspan即纵向跨越的单元格数
								, { field: 'type', title: '救援列车', width: 100, rowspan: 2, align: "center" }
								, { field: 'num', title: '现有人数', width: 100, rowspan: 2, align: "center" }
								, { field: 'isManager', title: '管理/人员', colspan: 2, align: "center" } //colspan即横跨的单元格数，这种情况下不用设置field和width
								, { field: 'age', title: '年龄', width: 100, rowspan: 2, align: "center" }
								, { field: 'degree', title: '文化程度', width: 100, rowspan: 2, align: "center" }
								, { field: 'ageLayer', title: '年龄结构', colspan: 5, align: "center" }
								, { field: 'degreeLayer', title: '文化层次', colspan: 6, align: "center" }
							], [
								{ field: 'username', title: '姓名', width: 80, align: "center" }
								, { field: 'work', title: '职务', width: 80, align: "center" }
								, { field: 'lte50', title: '>=50', width: 80 }
								, { field: 'in40', title: '40-49', width: 80 }
								, { field: 'in30', title: '30-39', width: 80 }
								, { field: 'in20', title: '<=29', width: 80 }
								, { field: 'average', title: '平均', width: 80 }
								, { field: 'xx', title: '小学', width: 80 }
								, { field: 'cz', title: '初中', width: 80 }
								, { field: 'gz', title: '高中', width: 80 }
								, { field: 'zz', title: '中专', width: 80 }
								, { field: 'dz', title: '大专', width: 80 }
								, { field: 'bk', title: '本科', width: 80 }


							]
						]

						, parseData: function (res) {
							res.data.push({
								"id": 92, "unit": "总计"

							});
							res.data.push({
								"id": 92, "unit": "比例"
							});
							res.data.push({
								"id": 93, "unit": "备注", "type": "鹰潭机务段救援列车干部职工共计59人，其中管理干部4人，工人55人，平均年龄为51.76。"
							});
							res.count = res.data.length;
							console.log(res);
							return {
								"code": res.code, //解析接口状态
								"msg": res.msg, //解析提示文本
								"count": res.count, //解析数据长度
								"data": res.data //解析数据列表
							};
						}

						, done: function (res, curr, count) {
							//如果是异步请求数据方式，res即为你接口返回的信息。
							//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
							// console.log(res);

							// //得到当前页码
							// console.log(curr);

							// //得到数据总量
							// console.log(count);


							// mergeRowsVertically("demo2", 1, 0, 1);

							// mergeRowsHorizontally("demo2",1,3,7);

							// console.log($("div[lay-id='demo2']").html())
						}

					});

				}


			});




			/**
			 * 垂直方向上合并单元格
			 * @param rootColIndex 需要排序的列号(start from 0)
			 * @param startRowIndex 排序的起始行号(start from 0)
			 * @param endRowIndex 排序的结尾行号(start from 0)
			 */
			var mergeRowsVertically = function (tableId, rootColIndex, startRowIndex, endRowIndex) {
				if (!tableId) {
					console.error("tableId is invalid!")
					return;
				}

				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");

				if (!startRowIndex) {
					startRowIndex = 0;
				}
				if (!endRowIndex) {
					endRowIndex = rows.length - 1;
				}


				if (rootColIndex < 0 || startRowIndex < 0 || endRowIndex < 0 || startRowIndex >= endRowIndex) {
					console.error("error:[rootColIndex<0||startRowIndex<0||endRowIndex<0||startRowIndex>=endRowIndex]")
					return;
				}

				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");
				console.log(rows.length)
				for (var i = startRowIndex; i < rows.length; i++) {

					var cols = $(rows[i]).find("td");
					if (i == startRowIndex) {

						// console.log(cols.length)
						$(cols[rootColIndex]).attr("rowspan", 2)

					} else if (i <= endRowIndex) {
						// console.log(cols.length)
						// var cols = $(r).find("td");
						$(cols[rootColIndex]).css("display", "none")

					}

				}
			}

			/**
			 * 垂直方向上合并单元格
			 * @param rootColIndex 需要排序的行号(start from 0)
			 * @param startColIndex 排序的起始列号(start from 0)
			 * @param endColIndex 排序的结尾列号(start from 0)
			 */
			var mergeRowsHorizontally = function (tableId, rootRowIndex, startColIndex, endColIndex) {
				if (!tableId) {
					console.error("tableId is invalid!")
					return;
				}
				var table = $("div[lay-id='" + tableId + "']");
				var tbody = table.find("tbody");
				// console.log(tbody.html())
				var rows = tbody.find("tr");
				//随便取第一行
				var cols = $(rows[0]).find("td");

				if (!startColIndex) {
					startColIndex = 0;
				}
				if (!endColIndex) {
					endColIndex = cols.length - 1;
				}
				if (rootRowIndex < 0 || startColIndex < 0 || endColIndex < 0 || startColIndex >= endColIndex) {
					console.error("error:[rootRowIndex < 0 || startColIndex < 0 || endColIndex < 0 || startColIndex >= endColIndex]")
					return;
				}



				// console.log(rows.length)
				for (var i = 0; i < rows.length; i++) {

					var cols = $(rows[i]).find("td");
					if (i == rootRowIndex) {

						$(cols[startColIndex]).attr("colspan", endColIndex - startColIndex + 1)

						//console.log(cols.length)

						for (var i = startColIndex + 1; i <= endColIndex; i++) {
							$(cols[i]).css("display", "none")

						}

					}

				}

			}

		});



	</script>





</body>

</html>